import "./index.scss";
import { useState, useEffect } from "react";
import {
  Tabs,
  Button,
  Select,
  Form,
  Input,
  DatePicker,
  Space,
  Table,
  Modal,
  Popconfirm,
  message,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import TextArea from "antd/es/input/TextArea";
import { useNavigate } from "react-router-dom";
import { CSVLink } from "react-csv";
import http from "../../../utils/http";
//引入国际化时间
import "dayjs/locale/zh-cn";
import locale from "antd/es/date-picker/locale/zh_CN";

const Examination = () => {
  //时间转换
  const toDub = (n: any) => (n < 10 ? "0" + n : "" + n);
  //年月日时分秒
  const toTime = (date: any) => {
    const oTime = new Date(date);
    return (
      oTime.getFullYear() +
      "-" +
      toDub(oTime.getMonth() + 1) +
      "-" +
      toDub(oTime.getDate()) +
      " " +
      toDub(oTime.getHours()) +
      ":" +
      toDub(oTime.getMinutes()) +
      ":" +
      toDub(oTime.getSeconds())
    );
  };
  //年月日
  const toDate = (date: any) => {
    const oDate = new Date(date);
    return (
      oDate.getFullYear() +
      "-" +
      toDub(oDate.getMonth() + 1) +
      "-" +
      toDub(oDate.getDate())
    );
  };

  // 表格数据类型
  interface DataType {
    key: string;
    oname: string;
    obehalf: string;
    ocharge: string;
    ophone: string;
    otype: string;
    otime: string;
    oaddress: string;
    owhy: string;
  }

  //待审核表格内容
  const columns: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail1(record);
          }}
          className="oname"
        >
          {text}
        </a>
      ),
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "经办人",
      dataIndex: "ocharge",
      key: "ocharge",
    },
    {
      title: "联系电话",
      dataIndex: "ophone",
      key: "ophone",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "备案类型",
      dataIndex: "otype",
      key: "otype",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              showModal1(record);
            }}
            style={{ color: "#fc6080" }}
          >
            不通过
          </a>

          <a
            onClick={() => {
              showModal2(record);
            }}
            className="oname"
          >
            通过
          </a>
        </Space>
      ),
    },
  ];
  //待审核渲染数据
  const getData1 = () => {
    http({
      url: "/getInstitutionsOne",
    }).then((res) => {
      console.log("待审核表数据", res);
      let _data1 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData1(_data1);
    });
  };
  useEffect(() => {
    getData1();
  }, []);
  //待审核点击名字跳转详情
  const navigate = useNavigate();
  const toDetail1 = (record: any) => {
    console.log("record", record);
    navigate(`/home/Details`, { state: record });
  };
  //待审核导出excel表
  const toExcel1 = () => {
    console.log("all", data1);
  };
  //待审核搜索的表单
  const [searchText1] = Form.useForm();
  //待审核搜索
  const onSearch1 = (search: any) => {
    http({
      url: "/searchOne",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        ocharge: search.ocharge || "",
        ophone: search.ophone || "",
        otype: search.otype || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData1(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审核清空搜索
  const clear1 = () => {
    searchText1.resetFields();
    getData1();
  };
  //待审核新增
  const [isAddOpen, setIsAddOpen] = useState(false);
  const showAdd = () => {
    setIsAddOpen(true);
  };
  //待审核确定新增
  const [addText] = Form.useForm();
  const onAdd = (values: any) => {
    console.log("Add:", values);
    http({
      url: "/addExam",
      method: "post",
      data: {
        oname: values.oname,
        obehalf: values.obehalf,
        ocharge: values.ocharge,
        ophone: values.ophone,
        oaddress: values.oaddress,
        otype: values.otype,
        onum: values.onum,
        ogoal: values.ogoal,
        orange: values.orange,
        ocourse: values.ocourse,
        oform: values.oform,
        omoney: values.omoney,
        otop: values.otop,
        otext: values.otext,
        olicense: values.olicense,
        olicensetype: values.olicensetype,
        ocode: values.ocode,
        osend: toDate(values.osend),
        oexpire: toDate(values.oexpire),
        ostand: values.ostand,
      },
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("添加成功");
        setIsAddOpen(false);
        addText.resetFields();
        getData1();
      } else {
        message.error("添加失败");
      }
    });
  };
  const handleCancelAdd = () => {
    setIsAddOpen(false);
  };
  //待审核不通过
  const [val1] = Form.useForm();
  const showModal1 = (record: any) => {
    val1.setFieldsValue({ ...record });
    setIsModalOpen1(true);
  };
  const handleOk1 = () => {
    const data1 = val1.getFieldsValue(true);
    http({
      url: "/editStateThree",
      method: "post",
      data: {
        id: data1.id,
        ostate: "未通过",
        owhy: data1.owhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        setIsModalOpen1(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  //待审核通过
  const [val2] = Form.useForm();
  const showModal2 = (record: any) => {
    val2.setFieldsValue({ ...record });
    setIsModalOpen2(true);
  };
  const handleOk2 = () => {
    const data2 = val2.getFieldsValue(true);
    http({
      url: "/editStateOne",
      method: "post",
      data: {
        id: data2.id,
        ostate: "待审批",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        setIsModalOpen2(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };

  //待审批表格内容
  const columns1: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail2(record);
          }}
          className="oname"
        >
          {text}
        </a>
      ),
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "经办人",
      dataIndex: "ocharge",
      key: "ocharge",
    },
    {
      title: "联系电话",
      dataIndex: "ophone",
      key: "ophone",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "备案类型",
      dataIndex: "otype",
      key: "otype",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
    {
      title: "操作",
      key: "oaction",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              showModal3(record);
            }}
            style={{ color: "#fc6080" }}
          >
            不通过
          </a>

          <a
            onClick={() => {
              showModal4(record);
            }}
            className="oname"
          >
            通过
          </a>
        </Space>
      ),
    },
  ];
  //待审批数据渲染
  useEffect(() => {
    getData2();
  }, []);
  const getData2 = () => {
    http({
      url: "/getInstitutionsTwo",
    }).then((res) => {
      let _data2 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData2(_data2);
    });
  };
  //待审批点击名字跳转详情
  const toDetail2 = (record: any) => {
    console.log("record", record);
    navigate(`/home/Details1`, { state: record });
  };
  //待审批导出excel表
  const toExcel2 = () => {
    console.log("all", data2);
  };
  //待审批搜索的表单
  const [searchText2] = Form.useForm();
  //待审批搜索
  const onSearch2 = (search: any) => {
    // console.log("search", JSON.stringify(search));
    http({
      url: "/searchTwo",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        ocharge: search.ocharge || "",
        ophone: search.ophone || "",
        otype: search.otype || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData2(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待审批清空搜索
  const clear2 = () => {
    searchText2.resetFields();
    getData2();
  };
  //待审批不通过按钮
  const [val3] = Form.useForm();
  const showModal3 = (record: any) => {
    val3.setFieldsValue({ ...record });
    setIsModalOpen3(true);
  };
  const handleOk3 = () => {
    const data3 = val3.getFieldsValue(true);
    console.log("data3", data3);
    http({
      url: "/editStateFour",
      method: "post",
      data: {
        id: data3.id,
        ostate: "未通过",
        owhy: data3.owhy,
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("不通过成功");
        setIsModalOpen3(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("不通过失败");
      }
    });
  };
  const handleCancel3 = () => {
    setIsModalOpen3(false);
  };
  //待审批通过按钮
  const [val4] = Form.useForm();
  console.log(val4, "通过val4");
  const showModal4 = (record: any) => {
    val4.setFieldsValue({ ...record });
    setIsModalOpen4(true);
  };
  const handleOk4 = () => {
    const data4 = val4.getFieldsValue(true);
    http({
      url: "/editStateTwo",
      method: "post",
      data: {
        id: data4.id,
        ostate: "待教育局审核",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("通过成功");
        setIsModalOpen4(false);
        getData1();
        getData2();
        getData3();
        getData4();
      } else {
        message.error("通过失败");
      }
    });
  };
  const handleCancel4 = () => {
    setIsModalOpen4(false);
  };

  //待教育局审核表格内容
  const columns2: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail3(record);
          }}
          className="oname"
        >
          {text}
        </a>
      ),
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "经办人",
      dataIndex: "ocharge",
      key: "ocharge",
    },
    {
      title: "联系电话",
      dataIndex: "ophone",
      key: "ophone",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "备案类型",
      dataIndex: "otype",
      key: "otype",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
  ];
  //待教育局审核渲染
  useEffect(() => {
    getData3();
  }, []);
  const getData3 = () => {
    http({
      url: "/getInstitutionsThree",
    }).then((res) => {
      let _data3 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData3(_data3);
    });
  };
  //待教育局审核点击跳转
  const toDetail3 = (record: any) => {
    console.log("record", record);
    navigate(`/home/Details2`, { state: record });
  };
  //待教育局审核导出excel表
  const toExcel3 = () => {
    console.log("all", data3);
  };
  //待教育局审核搜索的表单
  const [searchText3] = Form.useForm();
  //待教育局审核搜索
  const onSearch3 = (search: any) => {
    console.log("search", JSON.stringify(search));
    http({
      url: "/searchThree",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        ocharge: search.ocharge || "",
        ophone: search.ophone || "",
        otype: search.otype || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
      },
    }).then((res: { [key: string]: any }) => {
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData3(_data);
      } else {
        message.error("查询失败");
      }
    });
  };
  //待教育局审核清空搜索
  const clear3 = () => {
    searchText3.resetFields();
    getData3();
  };

  //未通过表格内容
  const columns3: ColumnsType<DataType> = [
    {
      title: "机构名称",
      dataIndex: "oname",
      key: "oname",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail4(record);
          }}
          className="oname"
        >
          {text}
        </a>
      ),
    },
    {
      title: "法人代表",
      dataIndex: "obehalf",
      key: "obehalf",
    },
    {
      title: "经办人",
      dataIndex: "ocharge",
      key: "ocharge",
    },
    {
      title: "联系电话",
      dataIndex: "ophone",
      key: "ophone",
    },
    {
      title: "办学地址",
      dataIndex: "oaddress",
      key: "oaddress",
    },
    {
      title: "备案类型",
      dataIndex: "otype",
      key: "otype",
    },
    {
      title: "不通过阶段/原因",
      dataIndex: "owhy",
      key: "owhy",
    },
    {
      title: "提交时间",
      dataIndex: "otime",
      key: "otime",
      render: (text) => <a className="todate">{toTime(text)}</a>,
    },
  ];
  //未通过渲染
  useEffect(() => {
    getData4();
  }, []);
  const getData4 = () => {
    http({
      url: "/getInstitutionsFour",
    }).then((res) => {
      console.log("未通过表数据", res);

      let _data4 = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData4(_data4);
    });
  };
  //未通过点击跳转
  const toDetail4 = (record: any) => {
    console.log("record", record);
    navigate(`/home/Details3`, { state: record });
  };
  //未通过导出excel表
  const toExcel4 = () => {
    console.log("all", data4);
  };
  //未通过搜索的表单
  const [searchText4] = Form.useForm();
  //未通过搜索
  const onSearch4 = (search: any) => {
    console.log("search", JSON.stringify(search));
    http({
      url: "/searchFour",
      params: {
        oname: search.oname || "",
        obehalf: search.obehalf || "",
        ocharge: search.ocharge || "",
        ophone: search.ophone || "",
        otype: search.otype || "",
        otime:
          toDate(search.otime) == "NaN-NaN-NaN"
            ? ""
            : toDate(search.otime) || "",
        owhy: search.owhy || "",
      },
    }).then((res: { [key: string]: any }) => {
      //console.log(res);
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData4(_data);
        // getData()
      } else {
        message.error("查询失败");
      }
    });
  };
  //未通过清空搜索
  const clear4 = () => {
    searchText4.resetFields();
    getData4();
  };

  const [data1, setData1] = useState([]);
  const [data2, setData2] = useState([]);
  const [data3, setData3] = useState([]);
  const [data4, setData4] = useState([]);
  //审核不通过
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  //审核通过
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  //审批不通过
  const [isModalOpen3, setIsModalOpen3] = useState(false);
  //审批通过
  const [isModalOpen4, setIsModalOpen4] = useState(false);

  //标签页
  const onChange = (key: string) => {
    console.log(key);
  };
  const tabItem = [
    {
      label: "待审核",
      key: "1",
      children: (
        <>
          <Form
            className="boxBig"
            form={searchText1}
            name="customized_form_controls"
            layout="inline"
            onFinish={onSearch1}
          >
            <Form.Item name="oname" label="机构名称">
              <Input />
            </Form.Item>

            <Form.Item label="提交时间" name="otime">
              <DatePicker className="otime" locale={locale} placeholder="" />
            </Form.Item>

            <Form.Item label="备案类型" name="otype" className="otype">
              <Select>
                <Select.Option value="直接正式备案">直接正式备案</Select.Option>
                <Select.Option value="筹备申请">筹备申请</Select.Option>
                <Select.Option value="筹备后正式">筹备后正式</Select.Option>
                <Select.Option value="已取得许可证备案">
                  已取得许可证备案
                </Select.Option>
              </Select>
            </Form.Item>

            <Form.Item name="obehalf" label="法人代表">
              <Input />
            </Form.Item>

            <Form.Item name="ocharge" label="经办人" className="ocharge">
              <Input />
            </Form.Item>

            <Form.Item name="ophone" label="联系电话" className="ophone">
              <Input />
            </Form.Item>

            <Form.Item>
              <Button className="btn" htmlType="submit">
                查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={clear1}>
                清空查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={toExcel1}>
                <CSVLink
                  className="oname"
                  data={data1}
                  filename="行政许可备案审批-待审核导出表.csv"
                >
                  导出结果
                </CSVLink>
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={showAdd}>
                新增
              </Button>
            </Form.Item>
          </Form>

          <Table
            columns={columns}
            bordered={true}
            pagination={{ defaultPageSize: 5 }}
            dataSource={data1}
          />
        </>
      ),
    },
    {
      label: "待审批",
      key: "2",
      children: (
        <>
          <Form
            form={searchText2}
            className="boxBig"
            name="customized_form_controls"
            layout="inline"
            onFinish={onSearch2}
          >
            <Form.Item name="oname" label="机构名称">
              <Input />
            </Form.Item>

            <Form.Item label="提交时间" name="otime">
              <DatePicker className="otime" locale={locale} placeholder="" />
            </Form.Item>

            <Form.Item label="备案类型" name="otype" className="otype">
              <Select>
                <Select.Option value="直接正式备案">直接正式备案</Select.Option>
                <Select.Option value="筹备申请">筹备申请</Select.Option>
                <Select.Option value="筹备后正式">筹备后正式</Select.Option>
                <Select.Option value="已取得许可证备案">
                  已取得许可证备案
                </Select.Option>
              </Select>
            </Form.Item>

            <Form.Item name="obehalf" label="法人代表">
              <Input />
            </Form.Item>

            <Form.Item name="ocharge" label="经办人" className="ocharge">
              <Input />
            </Form.Item>

            <Form.Item name="ophone" label="联系电话">
              <Input />
            </Form.Item>

            <Form.Item>
              <Button className="btn" htmlType="submit">
                查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={clear2}>
                清空查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={toExcel2}>
                <CSVLink
                  className="oname"
                  data={data2}
                  filename="行政许可备案审批-待审批导出表.csv"
                >
                  导出结果
                </CSVLink>
              </Button>
            </Form.Item>
          </Form>

          <Table
            columns={columns1}
            bordered={true}
            pagination={{ defaultPageSize: 5 }}
            dataSource={data2}
          />
        </>
      ),
    },
    {
      label: "已通过",
      key: "3",
      children: (
        <>
          <Form
            form={searchText3}
            className="boxBig"
            name="customized_form_controls"
            layout="inline"
            onFinish={onSearch3}
          >
            <Form.Item name="oname" label="机构名称">
              <Input />
            </Form.Item>

            <Form.Item label="提交时间" name="otime">
              <DatePicker className="otime" locale={locale} placeholder="" />
            </Form.Item>

            <Form.Item label="备案类型" name="otype" className="otype">
              <Select>
                <Select.Option value="直接正式备案">直接正式备案</Select.Option>
                <Select.Option value="筹备申请">筹备申请</Select.Option>
                <Select.Option value="筹备后正式">筹备后正式</Select.Option>
                <Select.Option value="已取得许可证备案">
                  已取得许可证备案
                </Select.Option>
              </Select>
            </Form.Item>

            <Form.Item name="obehalf" label="法人代表">
              <Input />
            </Form.Item>

            <Form.Item name="ocharge" label="经办人" className="ocharge">
              <Input />
            </Form.Item>

            <Form.Item name="ophone" label="联系电话">
              <Input />
            </Form.Item>

            <Form.Item>
              <Button className="btn" htmlType="submit">
                查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={clear3}>
                清空查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={toExcel3}>
                <CSVLink
                  className="oname"
                  data={data3}
                  filename="行政许可备案审批-已通过导出表.csv"
                >
                  导出结果
                </CSVLink>
              </Button>
            </Form.Item>
          </Form>

          <Table
            columns={columns2}
            bordered={true}
            pagination={{ defaultPageSize: 5 }}
            dataSource={data3}
          />
        </>
      ),
    },
    {
      label: "未通过",
      key: "4",
      children: (
        <>
          <Form
            form={searchText4}
            className="boxBig"
            name="customized_form_controls"
            layout="inline"
            onFinish={onSearch4}
          >
            <Form.Item name="oname" label="机构名称">
              <Input />
            </Form.Item>

            <Form.Item label="提交时间" name="otime">
              <DatePicker className="otime" locale={locale} placeholder="" />
            </Form.Item>
            <Form.Item label="备案类型" name="otype" className="otype">
              <Select>
                <Select.Option value="直接正式备案">直接正式备案</Select.Option>
                <Select.Option value="筹备申请">筹备申请</Select.Option>
                <Select.Option value="筹备后正式">筹备后正式</Select.Option>
                <Select.Option value="已取得许可证备案">
                  已取得许可证备案
                </Select.Option>
              </Select>
            </Form.Item>

            <Form.Item name="obehalf" label="法人代表">
              <Input />
            </Form.Item>

            <Form.Item name="ocharge" label="经办人" className="ocharge">
              <Input />
            </Form.Item>

            <Form.Item name="ophone" label="联系电话">
              <Input />
            </Form.Item>

            <Form.Item name="owhy" label="不通过阶段/原因">
              <Input />
            </Form.Item>

            <Form.Item>
              <Button className="btn" htmlType="submit">
                查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={clear4}>
                清空查询
              </Button>
            </Form.Item>

            <Form.Item>
              <Button className="btn" onClick={toExcel4}>
                <CSVLink
                  className="oname"
                  data={data4}
                  filename="行政许可备案审批-未通过导出表.csv"
                >
                  导出结果
                </CSVLink>
              </Button>
            </Form.Item>
          </Form>

          <Table
            columns={columns3}
            bordered={true}
            pagination={{ defaultPageSize: 5 }}
            dataSource={data4}
          />
        </>
      ),
    },
  ];

  return (
    <div className="examination">
      <div className="title">行政许可审批</div>

      <div className="hr"></div>

      {/* 标签页 */}
      <Tabs defaultActiveKey="1" onChange={onChange} items={tabItem} />
      {/* 审核不通过弹框*/}
      <Modal
        title="不通过"
        open={isModalOpen1}
        onOk={handleOk1}
        onCancel={handleCancel1}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val1}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入不同意理由" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 审核通过弹框 */}
      <Modal
        title="通过"
        open={isModalOpen2}
        onOk={handleOk2}
        onCancel={handleCancel2}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val2}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入审核意见" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 审批不通过弹框*/}
      <Modal
        title="不通过"
        open={isModalOpen3}
        onOk={handleOk3}
        onCancel={handleCancel3}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val3}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入不同意理由" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 审批通过弹框 */}
      <Modal
        title="通过"
        open={isModalOpen4}
        onOk={handleOk4}
        onCancel={handleCancel4}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={val4}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 24,
          }}
          autoComplete="off"
        >
          <Form.Item name="owhy">
            <TextArea rows={4} placeholder="请输入审核意见" />
          </Form.Item>
        </Form>
      </Modal>

      {/* 新增框 */}
      <Modal
        title="新增"
        open={isAddOpen}
        onCancel={handleCancelAdd}
        footer={null}
      >
        <Form
          form={addText}
          name="basic"
          initialValues={{ remember: true }}
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 16 }}
          autoComplete="off"
          onFinish={onAdd}
        >
          <div className="items">
            <Form.Item
              label="机构名称"
              name="oname"
              style={{ width: 350 }}
              rules={[{ required: true, message: "请输入机构名称!" }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="法人代表"
              style={{ width: 350 }}
              name="obehalf"
              rules={[
                {
                  required: true,
                  pattern: /^[\u2E80-\u9FFF]+$/,
                  message: "请输入正确的姓名!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="经办人"
              name="ocharge"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  pattern: /^[\u2E80-\u9FFF]+$/,
                  message: "请输入正确的姓名!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="联系电话"
              name="ophone"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  pattern: /^1[3456789]\d{9}$/,
                  message: "请输入正确的电话!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="办学地址"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请选择办学地址!",
                },
              ]}
              name="oaddress"
            >
              <Select>
                <Select.Option value="锦江区">锦江区</Select.Option>
                <Select.Option value="青羊区">青羊区</Select.Option>
                <Select.Option value="金牛区">金牛区</Select.Option>
                <Select.Option value="武侯区">武侯区</Select.Option>
                <Select.Option value="成华区">成华区</Select.Option>
                <Select.Option value="龙泉驿区">龙泉驿区</Select.Option>
                <Select.Option value="新都区">新都区</Select.Option>
                <Select.Option value="郫都区">郫都区</Select.Option>
                <Select.Option value="温江区">温江区</Select.Option>
                <Select.Option value="双流区">双流区</Select.Option>
                <Select.Option value="青白江区">青白江区</Select.Option>
                <Select.Option value="新津区">新津区</Select.Option>
                <Select.Option value="都江堰市">都江堰市</Select.Option>
                <Select.Option value="彭州市">彭州市</Select.Option>
                <Select.Option value="邛崃市">邛崃市</Select.Option>
                <Select.Option value="崇州市">崇州市</Select.Option>
                <Select.Option value="简阳市">简阳市</Select.Option>
                <Select.Option value="大邑县">大邑县</Select.Option>
                <Select.Option value="浦江县">浦江县</Select.Option>
                <Select.Option value="金堂县">金堂县</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="备案类型"
              style={{ width: 350 }}
              rules={[{ required: true, message: "请选择备案类型!" }]}
              name="otype"
            >
              <Select>
                <Select.Option value="已取得许可证备案">
                  已取得许可证备案
                </Select.Option>
                <Select.Option value="筹备申请">筹备申请</Select.Option>
                <Select.Option value="筹备后正式">筹备后正式</Select.Option>
                <Select.Option value="直接正式">直接正式</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="许可证编码"
              name="onum"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入许可证编码!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="培养目标"
              name="ogoal"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入培养目标!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="招生范围"
              name="orange"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入招生范围!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="培训学科"
              name="ocourse"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入培训的学科!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="培训时间"
              name="oform"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入培训时间!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="办学资金"
              name="omoney"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入你的办学资金!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="机构状态"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请选择机构目前状态!",
                },
              ]}
              name="otop"
            >
              <Select className="btype">
                <Select.Option value="待颁证">待颁证</Select.Option>
                <Select.Option value="正常">
                  正常
                </Select.Option>
                <Select.Option value="停业整顿">停业整顿</Select.Option>
                <Select.Option value="黑名单">黑名单</Select.Option>

              </Select>
            </Form.Item>

            <Form.Item
              label="办学内容"
              name="otext"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入该机构的办学内容!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="营业执照"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入营业执照照片地址!",
                  type: "url",
                },
              ]}
              name="olicense"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="执照类型"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请选择执照类型!",
                },
              ]}
              name="olicensetype"
            >
              <Select className="btype">
                <Select.Option value="营业执照">营业执照</Select.Option>
                <Select.Option value="民办非企业单位登记证书">
                  民办非企业单位登记证书
                </Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              name="ocode"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入组织机构代码!",
                },
              ]}
              label="组织机构代码"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="执照发证日期"
              name="osend"
              style={{ width: 350 }}
              rules={[{ required: true, message: "请选择营业执照的发证日期!" }]}
            >
              <DatePicker locale={locale} placeholder="" />
            </Form.Item>

            <Form.Item
              label="执照到期时间"
              name="oexpire"
              style={{ width: 350 }}
              rules={[{ required: true, message: "请选择营业执照的到期时间!" }]}
            >
              <DatePicker locale={locale} placeholder="" />
            </Form.Item>

            <Form.Item
              name="ostand"
              style={{ width: 350 }}
              rules={[
                {
                  required: true,
                  message: "请输入机构的收费标准!",
                },
              ]}
              label="收费标准"
            >
              <Input />
            </Form.Item>
          </div>

          <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
            <Button
              className="clear"
              htmlType="button"
              onClick={handleCancelAdd}
            >
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default Examination;
